<template>
  <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%;">
    <el-col :span="20">
      <span>{{ nodeData.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{{ nodeData.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element -->
          <el-dropdown @command="handleAction">
            <span> 操作<i class="el-icon-arrow-down" /> </span>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <template v-if="!nodeData.root">
                <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                <el-dropdown-item command="del">删除部门</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { reqDelDepartments } from '@/api/departments.js'

export default {
  props: {
    nodeData: {
      type: Object,
      required: true
    }
  },

  methods: {
    handleAction (type) {
      // console.log(type)
      // 点击按钮，获取到command绑定的数据
      if (type === 'add') {
        // 通知父组件显示弹窗
        this.$emit('taggle-box', {
          isShow: true,
          // 点击添加子部门时，需要记录当前部门的信息(id)
          pid: this.nodeData.id,
          operateType: type
        })
      } else if (type === 'edit') {
        // 编辑
        // 通知父组件显示弹窗
        this.$emit('taggle-box', {
          isShow: true,
          // 点击添加子部门时，需要记录当前部门的信息(id)
          pid: this.nodeData.id,
          operateType: type
        })
      } else if (type === 'del') {
        // 删除

        // Promise 完成
        this.$confirm('确认要删除该部门吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          // 确定删除
          return reqDelDepartments(this.nodeData.id)
        }).then(ret => {
          // console.log(delRet)
          if (ret.code === 10000) {
            this.$message.success('删除部门成功')
            this.$emit('on-success')
            // 刷新列表：通知父组件刷新列表
          } else if (ret.code === 99999) {
            this.$message.warning(ret.message)
          }
        }).catch(err => {
          // 删除失败
          if (err !== 'cancel') {
            this.$message.error('删除部门失败')
          }
        })
      } else {
        // 其他情况
      }
    }
    // async-await 完成
    // async handleAction (type) {
    //   console.log(type)
    //   // 点击按钮，获取到command绑定的数据
    //   if (type === 'add') {
    //     // 添加
    //   } else if (type === 'edit') {
    //     // 编辑
    //   } else if (type === 'del') {
    //     // 删除
    //     try {
    //       const ret = await this.$confirm('确认要删除该部门吗?', '提示', {
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //       }).catch(err => err)

    //       console.log(ret)
    //       // 点击取消
    //       if (ret === 'cancel') return
    //       // 点击确定
    //       const delRet = await reqDelDepartments(this.nodeData.id)
    //       console.log(delRet)
    //       if (delRet.code === 10000) {
    //         this.$message.success('删除成功')
    //         this.$emit('on-success')
    //         // 子传父,
    //       } else if (delRet.code === 99999) {
    //         this.$message.warning(delRet.message)
    //       }
    //     } catch {
    //       this.$message.error('删除部门失败')
    //     }
    //   } else {
    //     // 其他情况
    //   }
    // }
  }
}

</script>

<style>
</style>
